<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>javascript opp 写法</title>
		<style>
			.col-xs-9{
				display: block;
				width: 100%;
				clear: both;
			}
			#box_,#box_2 {
				position:relative;
				width:200px;
				height:50px;
				border:1px solid transparent;
				float:left;
			}
			#bg_ ,#bg_2{
				height:10px;
				margin-top:11px;
				border:1px solid #ddd;
				border-radius:5px;
				overflow:hidden;
			}
			#bgcolor_,#bgcolor_2 {
				background:#f3f3f3;
				width:100px;
				height:10px;
				border-radius:5px;
			}
			#bt_,#bt_2 {
				width:35px;
				height:35px;
				background-color:rgb(243,243,243);
				border-radius:17px;
				overflow:hidden;
				position:absolute;
				left:80px;
				margin-left:-12px;
				border:1px solid #d0cbcb;
				top:-2px;
				cursor:pointer;
			}
			#text_xa_,#text_xa_2{
				width:100px;
				margin:0 auto;
				font-size:14px;
				padding-left:10px;
				padding-top:2px;
				line-height:2em;
				float:left;
			}
			#text_xa,#text_xa2 {
				width:100px;
				margin:0 auto;
				font-size:14px;
				padding-left:10px;
				padding-top:2px;
				line-height:2em;
				float:left;
			}
		</style>
	</head>
	<body oncontextmenu="return false" onselectstart="return false">
		<!--
        	模块一
        -->
	    <div style="width:100%;" class="abgs_a">
	        <form class="form-horizontal col-sm-12" role="form">
	            <div class="form-group label_a div_left">
	                <div class="col-sm-4 col-xs-9">
	                    <div id="text_xa_">安卓:50%</div>
	                    <div id="box_">
	                        <div id="bg_">
	                            <div id="bgcolor_"></div>
	                        </div>
	                        <div id="bt_"></div>
	                    </div>
	                    <div id="text_xa">苹果:50%</div>
	                </div>
	            </div>
	        </form>
	    </div>
	    
	    <!--
        	模块二
        -->
	    <div class="col-xs-9">
            <div id="text_xa_2">安卓:50%</div>
            <div id="box_2">
                <div id="bg_2">
                    <div id="bgcolor_2"></div>
                </div>
                <div id="bt_2"></div>
            </div>
            <div id="text_xa2">苹果:50%</div>
        </div>
	    
		<script type="text/javascript">
			window.onload = function(){
				
				!(function(w,d,undefined){
					
					function Proccess(oBox,oBg,oBgcolor,oBtn,oText,oText_xa){
						var _this = this;
						this.oBox = oBox;
						this.oBg = oBg;
						this.oBgcolor = oBgcolor;
						this.oBtn = oBtn;
						this.oText = oText;
						this.oText_xa = oText_xa;
						this.statu = false;
					    this.ox = 0;
					    this.lx = 0;
					    this.left = 100;
					    this.bgleft = 0;
					  	if ( _this.hasTouch()) {
					  		_this.oBox.addEventListener('touchstart',function(e){
					  			var e = e||window.event;
					  			_this.touchstart(e);
					  		})
					  	} else{
					  		_this.oBox.onmousedown = function(e){
								
								var e = e||window.event;
								_this.onmousedown(e);
							};
					  	}
					   
					}
					
					Proccess.prototype = {
						hasTouch:function(){
					        var touchObj={};
					        touchObj.isSupportTouch = "ontouchend" in document ? true : false;
					        return touchObj.isSupportTouch ;
					   },
					   onmousedown:function(e){
					   	   var This = this;
					   	   this.lx = this.oBtn.offsetLeft;
					       this.ox = e.pageX - this.left;
					       this.statu = true;
					      d.onmousemove = function(e){
					      	var e = e||window.event
					      	This.onmousemove(e);
					      }
					      d.onmouseup = function(e){
					      	This.Eventend();
					      }
					   },
					   Eventend:function(){
					   		this.statu = false;
					   },
					   onmousemove:function(e){
					   		if (this.statu) {
					            this.left = e.pageX - this.ox;
					            if (this.left < 0) {
					                this.left = 0;
					            }
					            if (this.left > 200) {
					                this.left = 200;
					            }
					            this.oBtn.style.left = this.left + 'px';
					            this.oBgcolor.style.width = this.left +'px';
					            this.oText.innerHTML=('安卓:' + parseFloat(this.left / 2).toFixed(2) + '%');
					            this.oText_xa.innerHTML=('苹果:' + parseFloat(100 - (this.left / 2)).toFixed(2) + '%');
					        }
					   },
					   touchstart:function(e){
					   		var This = this;
					   		var touch = e.touches["0"] || e.originalEvent.changedTouches[0];
					        this.lx = this.oBtn.offsetLeft;
					        this.ox = touch.pageX - this.left;
					        this.statu = true;
					        d.addEventListener('touchmove',function(e){
					        	var e = e||window.event;
					        	This.touchmove(e);
					        })
					         d.addEventListener('touchend',function(e){
					        	This.Eventend();
					        })
					   },
					   touchmove:function(e){
					   		var touch = e.touches[0] || e.originalEvent.changedTouches[0];
					        if (this.statu) {
					            this.left = touch.pageX -  this.ox;
					            if ( this.left < 0) {
					                 this.left = 0;
					            }
					            if ( this.left > 200) {
					                 this.left = 200;
					            }
					            this.oBtn.style.left =  this.left + 'px';
					            this.oBgcolor.style.width =  this.left +'px';
					            this.oText.innerHTML=('安卓:' + parseFloat(this.left / 2).toFixed(2) + '%');
					            this.oText_xa.innerHTML=('苹果:' + parseFloat(100 - (this.left / 2)).toFixed(2) + '%');
					        }
					   }
					   
					}
					
					<!--模块一-->
					!(function(){
						var oBox = document.getElementById('box_');
			
					    var oBg = document.getElementById('bg_');
			
					    var oBgcolor = document.getElementById("bgcolor_");
				
					    var oBtn = document.getElementById('bt_');
			
					    var oText = document.getElementById('text_xa_');
			
					    var oText_xa = document.getElementById('text_xa');
					    
						new Proccess(oBox,oBg,oBgcolor,oBtn,oText,oText_xa);
					})();
					
					<!--模块二-->
					!(function(){
						var oBox = document.getElementById('box_2');
			
					    var oBg = document.getElementById('bg_2');
			
					    var oBgcolor = document.getElementById("bgcolor_2");
				
					    var oBtn = document.getElementById('bt_2');
			
					    var oText = document.getElementById('text_xa_2');
			
					    var oText_xa = document.getElementById('text_xa2');
					    
						new Proccess(oBox,oBg,oBgcolor,oBtn,oText,oText_xa);
					})();
					
				})(window,document);
			}	
		</script>
	</body>
</html>
